<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts定位</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
</head>
<style>
#chart{
    width: 800px;
    height: 400px;
    margin-top: 10px;
}
</style>

<body>
<div>
    top: <input type="text" id="top">
    left: <input type="text" id="left">
    right: <input type="text" id="right">
    buttom: <input type="text" id="bottom">
</div>
<div id="chart"></div>
<script>
    let _left = 0
    let _top = 0
    let _right = 0
    let _bottom = 0
    const topInput = document.getElementById('top')
    const leftInput = document.getElementById('left')
    const bottomInput = document.getElementById('bottom')
    const rightInput = document.getElementById('right')
    const chartDom = document.getElementById('chart')
    const chart = echarts.init(chartDom)
    function addInputEvent(dom,key){
        dom.addEventListener('input',function (e){
            value = e.target.value
            switch(key) {
                case 'top':
                    _top = value
                    break
                case 'left':
                    _left = value
                    break
                case 'bottom':
                    _bottom = value
                    break
                case 'right':
                    _right = value
                    break
            }
            render()
        })
    }
    function render(){
        const option = {
            title: {
                text: '数据可视化',
            },
            xAxis:{
                type:'category'
            },
            yAxis:{},
            dataset:{
                source: [
                    ['一季度', 79, 100, '分类1', 50],
                    ['二季度', 81, 112, '分类2', 60],
                    ['三季度', 88, 96, '分类3', 55],
                    ['四季度', 72, 123, '分类4', 70],
                ]
            },
            grid: [{
                left: _left,
                top: _top,
                right: _right,
                bottom: _bottom
            }],
            series: [{
                name: '折线图',
                type: 'line',
                encode: { x:3, y: 4 },
                color: "rgb(145, 204, 117)",
            }]
        }
        chart.setOption(option)
    }
    window.onload = function () {
        topInput.value = _top
        leftInput.value = _left
        bottomInput.value = _bottom
        rightInput.value = _right
        addInputEvent(topInput, 'top')
        addInputEvent(leftInput, 'left')
        addInputEvent(bottomInput, 'bottom')
        addInputEvent(rightInput, 'right')
        render()
    }
</script>
</body>
</html>